<template>
  <div class="dv">
    <input type="text" placeholder="按下回车" @keydown.enter="add" v-model="input" />
    <h1>已经完成</h1>
    <div v-for="(item, index) in list" v-show="item.falg"  >
      <input type="checkbox" v-model="item.falg" />
      {{ item.title }}
      <button @click="del(index)">X</button>
    </div>
    <h1>未完成</h1>
    <div v-for="(item, index) in list" v-show="!item.falg">
      <input type="checkbox" v-model="item.falg" />
      {{ item.title }}
      <button @click="del(index)">X</button>
    </div>
    <h1>全部</h1>
    <div v-for="(item, index) in list">
      <input type="checkbox" v-model="item.falg" />
      {{ item.title }}
      <button @click="del(index)">X</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      list: [
        {
          title: "吃饭",
          falg: true,
        },
        {
          title: "睡觉",
          falg: true,
        },
        {
          title: "打豆豆",
          falg: false,
        },
        {
          title: "哈哈哈",
          falg: false,
        },
      ],
    };
  },
  methods: {
    // 添加
    add() {
      // 判空
      if (this.input == "") {
        alert("不能为空");
        return false;
      }
      this.list.push({
        title: this.input,
        falg: false,
      });
      // 置空
      this.input = "";
    },
    // 删除
    del(index) {
      this.list.splice(index, 1);
    },
  },
  created() {},
  mounted() {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.dv {
  background: pink;
  width: 300px;
  margin: auto;
}
</style>
